import React, {Component} from 'react';
import {
    Flex,
    Icon,
    Tabs,
    NavBar,
    Popover,
    WingBlank,
    InputItem,
    WhiteSpace,
    ActionSheet,
    Carousel,
    Modal,
    Grid,
    List,
    Button,
    Toast,
} from 'antd-mobile';
import { connect } from 'dva';
import { createForm } from 'rc-form';
import Moment from 'moment';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import {routerRedux} from "dva/router";
import {distribution,distributionSearch,putForWard} from './distribution.less';
import {goto_search_title} from "../search/GotoSearch.less";
import {fenlei, noguanzhu} from "../find/findIndex.less";
import {goods_search_header} from "../search/GoodsSearch.less";
import {articleLabel} from "../find/publish.less";
import {IMAGE_DOMAIN} from "../../utils/common";
import {btn} from "../balance/myPhone.less";

const Item = Popover.Item;




class PutForward extends Component {
    constructor(props){
        super(props);
        this.state={
            modal:false,
            value:"",
            img:""
        };

        this.AlloyTouch = null;
    }

    componentDidMount(){
        this.props.dispatch({type:"distribution/putForwardEFF"})

    }


    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;
    };


    edit=()=>{
        const {dispatch,distribution} = this.props;
        const {accountBalance,tip,minWithdraw} = distribution;
        const { putForwardVal } = this.props.form.getFieldsValue();
        console.log(minWithdraw);
        if(putForwardVal){
            if(putForwardVal%minWithdraw==0&&putForwardVal>0){
                this.props.dispatch({type:"distribution/putForwardCashEFF",obj:{commission: putForwardVal}}).then(res =>{
                    if(res.code==200){
                        Toast.success(res.msg,2,()=>{
                            this.props.dispatch(routerRedux.push({
                                pathname:`/cashDetail`
                            }))
                        })
                    }
                })
            }else{
                console.log(minWithdraw);
                Toast.info("提现金额限制为￥"+minWithdraw+"的整数倍",2)
            }

        }else{
            Toast.info("请输入需要的提现的金额!",2)
        }
    }
    render() {
        const {dispatch,distribution} = this.props;
        const { getFieldProps} = this.props.form;
        console.log(this.props.distribution)
        const {accountBalance,tip,minWithdraw} = distribution;
        return ( <Flex direction="column" className={putForWard} style={{height:"100%",background:"#fff"}}>
                <NavTopBar title="可提现金额" dispatch={this.props.dispatch}/>
                <div style={{textAlign:"center",background:"#fff",width:"100%",margin:"3rem 0"}}>
                    <div style={{color:"#ff0036",fontSize:".3rem",marginBottom:".6rem"}}>¥<span style={{fontSize:".6rem"}}>{accountBalance||0}</span></div>
                    <div style={{color:"#999"}}>{tip}</div>
                </div>

                <List style={{width:"100%",marginTop:".2rem"}}>
                    <InputItem
                        {...getFieldProps('putForwardVal')}
                        clear
                        type="number"
                        maxLength = {20}
                        placeholder="输入提现金额"
                        onBlur={(val)=>{
                            console.log(val,accountBalance,val>+accountBalance)
                            if(val>+accountBalance){
                                Toast.info("输入金额超过可提现金额,请重新输入!",2,()=>{
                                    val = "";
                                })
                            }
                        }}
                    ></InputItem>
                </List>
                <Flex style={{marginTop:".2rem",color:"#999",paddingLeft:"1rem",width:"100%"}}> 提现金额限制为￥{minWithdraw}的整数倍</Flex>

                <Button className={ btn } onClick={this.edit} >立即提现</Button>
            </Flex>

        )


    }
}

export default connect(({ distribution}) => ({ distribution}))(createForm()(PutForward));